<template>
	<view class="pics">
		<scroll-view class="pices-scroll-left" scroll-y>
			<view :class="active === index ? 'active' :'' " v-for="(item,index) in imageCategoryList" :key="item.id" @click="handelChangeCate(item.id,index)">{{ item.title }}</view>
		</scroll-view>
		<scroll-view class="pices-scroll-right" scroll-y>
			<view class="nodata" v-if="imageLists.length == 0">
				暂无数据
			</view>
			<view v-else v-for="item in imageLists" :key="item.id">
				<image @click="handelPreviewImage(item.img_url)" :src="item.img_url"></image>
				<view class="title">{{ item.title }}</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imageCategoryList:[],
				imageLists:[],
				active:0,
				id:14
			}
		},
		methods:{
			//获取分类的菜单栏
			async getimgcategoryList(){
				const res = await this.$myRequest({
					url:'/api/getimgcategory'
				})
				this.imageCategoryList = res.data.message
			},
			//点击切换菜单
			handelChangeCate(id,idx){
				this.active = idx;
				this.id = id;
				this.getImageLists(id);
			},
			//请求右侧的图片数据列表
			async getImageLists(id){
				const res = await this.$myRequest({
					url:'/api/getimages/' + this.id
				})
				this.imageLists = res.data.message
				// console.log(this.imageLists)
			},
			//进入图片的浏览界面
			handelPreviewImage(current){
				// console.log(url);
				const urls = this.imageLists.map(item=>{
					return item.img_url;
				})
				uni.previewImage({
					current,
					urls
				})
			}
		},
		onLoad(){
			this.getimgcategoryList();
			this.getImageLists();
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.pices-scroll-left{
			width: 200rpx;
			height: 100%;
			border-right: 1rpx solid #ccc;
			view{
				height: 60px;
				line-height: 60px;
				border-bottom: 1rpx solid #ccc;
				text-align: center;
				color: #333;
				font-size: 30rpx;
			}
			.active{
				background-color: #b50e03;
				color: #FFFFFF;
			}
		}
		.pices-scroll-right{
			width: calc(100vw - 201rpx);
			height: 100%;
				
			.nodata{
				font-size: 36rpx;
				font-weight: 700;
				text-align: center;
			}
			view{
				margin: 15rpx 0;
				image{
					width: 100%;
				}
				.title{
					text-indent: 25rpx;
				}
			}
		}
	}
</style>
